<template>
	<view class="main-page bg-white" style="align-items: center;">
		<image class="logo" src="../../static/common/ic_logo.png"></image>
		<image class="app-name" src="../../static/common/ic_login_title.png"></image>
		<input 
			class="mobile-box"
			v-model="mobile"
			placeholder="请输入账户"
			placeholder-class="font-999-32"
		/>
		<view class="code-box">
			<input 
				class="code-input"
				v-model="code"
				placeholder="请输入验证码"
				placeholder-class="font-999-32"
			/>
			<text class="code-btn" @click="handleGetCode" v-if="canSendCode">获取验证码</text>
			<text v-else class="negative-btn">{{getCodeText}}</text>
		</view>
		<view class="row-container-center ml-15 mr-15 mt-60" style="width: calc(100% - 30rpx);">
			<text :class="{'red-btn' : mobile && code && hasAgree , 
			'red-negative-btn' : !mobile || !code ||!hasAgree}" @click="handleLogin">登录</text>
		</view>
		<view class="agreement-box" @click="hasAgree = !hasAgree">
			<image :class="{'agree-ic' : hasAgree , 'not-agree-ic' : !hasAgree}"></image>
			<view style="display: inline;">
				<text class="font-666-28">登录视为同意</text>
				<text class="font-ec5-28" @click.stop="gotoAgreement">《预约兔用户服务协议》</text>
				<text class="font-666-28">以及</text>
				<text class="font-ec5-28" @click.stop="gotoPrivacy">《隐私政策》</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasAgree:false,
				mobile:'',		
				code:'',
				leftMills:60,
				canSendCode:true,
				getCodeText:'重新获取',
				timer:null
			}
		},
		
		onLoad() {
			if (this.cookie.get("ap_token")){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		
		onUnload() {
			if (this.timer){
				clearInterval(this.timer)
			}
		},
		
		methods: {
			gotoAgreement(){
				uni.navigateTo({
					url:'/pages/mine/agreement'
				})
			},
			
			gotoPrivacy(){
				uni.navigateTo({
					url:'/pages/mine/privacy'
				})
			},
			
			handleGetCode(){
				if (!this.mobile){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:"/common/sendCode",
					method:"POST",
					data:{
						mobile: that.mobile
					},
					success(res) {
						if (res.code == 200){
							that.canSendCode = false
							that.timer = setInterval(()=>{
								that.leftMills --
								that.getCodeText = "重新获取(" + that.leftMills + "s)"
								if (that.leftMills <= 0){
									that.canSendCode = true
									that.getCodeText = "重新获取"
									clearInterval(that.timer)
									that.leftMills = 60
								}
							} , 1000)
						}else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					fail(e) {
					}
				})
				
				
			},
			
			handleLogin(){
				if (!this.mobile || !this.code || !this.hasAgree) return
				
				let that = this
					this.http({
						url:"/login/submit",
						method:"POST",
						data:{
							username: that.mobile,
							password: that.code,
						},
						success(res) {
							if (res.code == 200){
								that.cookie.set("ap_token" , res.data.token)
								that.cookie.set("ap_user_data" , res.data)
								that.cookie.set("auth_list" , res.data.authList)
								
								uni.$emit("refreshIndexData")
								uni.switchTab({
									url:'/pages/index/index'
								})
							} else{
								setTimeout(()=>{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})		
								},500)
							}
						},
						fail(e) {
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	.logo{
		width: 134rpx;
		height: 134rpx;
		margin-top: 268rpx;
		margin-bottom: 20rpx;
	}
	
	.app-name{
		width: 133rpx;
		height: 42rpx;
		margin-bottom: 62rpx;
	}
	
	.mobile-box{
		width: calc(100% - 145rpx);
		height: 100rpx;
		margin: 0rpx 45rpx;
		padding: 0rpx 30rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		color: #333333;
		font-size: 32rpx;
	}
	
	.code-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 90rpx);
		margin-top: 30rpx;
		
		.code-input{
			width: 316rpx;
			height: 100rpx;
			margin-right: 30rpx;
			padding: 0rpx 30rpx;
			background: #F4F4F4;
			border-radius: 10rpx;
			color: #333333;
			font-size: 32rpx;
		}
		
		.code-btn{
			color: white;
			font-size: 32rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			flex-grow: 1;
			background: #EC5150;
			border-radius: 10rpx;
		}
		
		.negative-btn{
			color: white;
			font-size: 32rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			flex-grow: 1;
			background: #EC5150;
			border-radius: 10rpx;
			opacity: 0.5;
		}
	}
	
	.agreement-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 90rpx);
		margin-top: 40rpx;
		
		.agree-ic{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
			content: url('../../static/common/ic_agree.png');
			flex-shrink: 0;
			margin-top: 5rpx;
		}
		
		.not-agree-ic{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
			content: url('../../static/common/ic_not_agree.png');
			flex-shrink: 0;
			margin-top: 5rpx;
		}
	}
	
</style>
